import { Component, OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
import { DisplayService } from '../display.service';
import { IraPanelComponent } from "../ira-panel/ira-panel.component";
import { MapUiService } from '../../one-map/map-ui.service';
import Overlay from 'ol/Overlay';
import { FetchService } from 'src/app/core/net/fetch.service';
import { HttpClient } from '@angular/common/http';

const Points = [
  {
    name: '河西灌区',
    coordinate: [106.06201171875, 38.10882568359375],
    waterQ: 10,
    progress: 60,
    className: ''
  },
  {
    name: '河东灌区',
    coordinate: [106.1993408203125, 37.939224243164062],
    waterQ: 10,
    progress: 60,
    className: 'bottom-right'
  },
  {
    name: '卫宁灌区',
    coordinate: [105.30120849609375, 37.508697509765625],
    waterQ: 10,
    progress: 60,
    className: ''
  },
  // {
  //   name: '扬水灌区',
  //   coordinate: [105.84640502929688, 37.071990966796875],
  //   waterQ: 10,
  //   progress: 60,
  //   className: 'top-left'
  // },
  {
    name: '扬水灌区',
    coordinate: [106.09634399414062, 37.38922119140625],
    waterQ: 10,
    progress: 60,
    className: ''
  }
];

@Component({
  selector: 'app-ira',
  templateUrl: './ira.component.html',
  styleUrls: ['../river/river.component.scss', './ira.component.scss']
})
export class IraComponent implements OnInit, AfterViewInit, OnDestroy {
  points: any[] = [];
  geoserverUrl = (window as any).environment.geoserverUrl;
  videos: any[] = [
    // {
    //   // 美利渠测水断面
    //   id: '6c7a16c72caa47ceb9a6859d8c3791ed',
    //   imgSrc: 'video1.png'
    // },
    // {
    //   // 泉眼山前池1
    //   id: '650f23e7de1f437695bb254c6f234b0f',
    //   imgSrc: 'video2.png'
    // },
    // {
    //   // 河西总干渠
    //   id: 'bb3ce655c54c4da5a5c506b2463ac670',
    //   imgSrc: 'video3.png'
    // },
    {
      // 潜坝闸前
      id: 'd36f3e4c29b14fec98988ac80d463cf8'
    },
    {
      // 唐正闸
      id: 'bc67a02aa25b41f180b5ebea5e6aacc4'
    },
    {
      // 泉眼山出水口
      id: 'af6e23d21a044f4e8a959e67de6b3a36'
    }
  ];
  clickIdArr: any[] = [2, 5, 6, 11];
  downIdArr: any[] = [5, 8, 12];

  constructor(private dispService: DisplayService, private mapService: MapUiService, private elementRef: ElementRef, private http: HttpClient, private fetchService: FetchService) { }

  ngOnInit(): void {
    this.dispService.typeChange.next('ira');
    // this.dispService.createSidePane(null);
    this.http.get(`${this.geoserverUrl}water_resource_dispatch_nx/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=water_resource_dispatch_nx%3Aview_zuzhi&maxFeatures=20000&outputFormat=application%2Fjson&cql_filter=type%3D1`).subscribe((res: any) => {
      this.points = res.features.map(f => {
        return { ...f.properties, ...f.geometry };
      });
    });
  }

  ngAfterViewInit(): void {
    this.mapService.getMapInstance().then(() => {
      setTimeout(() => {
        this.points.map((p, i) => {
          const point = this.elementRef.nativeElement.querySelector(`.point${i}`);
          this.dispService.addOverlay(point, p.coordinates);
        });
      }, 1000);
    });
    this.queryOffice();
  }

  ngOnDestroy(): void {
    this.dispService.clearOverlay();
  }

  queryOffice() {
    this.fetchService.post("muw/wrsMuwWfData/query", {}).subscribe((data: any) => {
      this.points = this.points.map(p => {
        data.map(d => {
          if (d.id == p.id) {
            p = {
              ...p,
              ...d,
              eClick: this.clickIdArr.indexOf(d.id) > -1,
              className: this.downIdArr.indexOf(d.id) > -1 ? 'down' : ''
            };
          }
        });
        return p;
      });
    });
  }
}
